<template>
  <div class="dashboard-container">
    <el-row :gutter="6">
      <el-col :span="20">
        <div style="width:100%">
          <!-- 移交资产 -->
          <div v-for="(card,index) in cards" :key="index" style=" display: inline-block;width:20%">
            <div v-if="card === 'transferAsset'" class="padding-0-4">
              <TransferAsset />
            </div>
            <!-- 服务时长 -->
            <div v-if="card === 'serviceTime'" class="padding-0-4">
              <ServiceTime />
            </div>
            <!-- 日巡检 -->
            <div v-if="card === 'dailyInspection'" class="padding-0-4">
              <DailyInspection />
            </div>
            <!-- 健康巡检 -->
            <div v-if="card === 'healthInspection'" class="padding-0-4">
              <HealthInspection />
            </div>
            <!-- 处理故障 -->
            <div v-if="card === 'troubleshooting'" class="padding-0-4">
              <Troubleshooting />
            </div>
            <!-- 协办故障 -->
            <div v-if="card === 'sponsortrouble'" class="padding-0-4">
              <Sponsortrouble />
            </div>
            <!-- 领用配件 -->
            <div v-if="card === 'useGoods'" class="padding-0-4">
              <UseGoods />
            </div>
            <!-- 任务转派 -->
            <div v-if="card === 'taskTransfer'" class="padding-0-4">
              <TaskTransfer />
            </div>
            <!-- 运维资产 -->
            <div v-if="card === 'operationAsset'" class="padding-0-4">
              <OperationAsset />
            </div>
            <!-- 服务厅局 -->
            <div v-if="card === 'serviceBureau'" class="padding-0-4">
              <ServiceBureau />
            </div>

          </div>

          <div>
            <el-card :class="cards.length>0?'card-h-80':'card-h-100'">
              <div slot="header" class="clearfix">
                <span>服务台</span>
              </div>
              <el-tabs v-model="show">
                <el-tab-pane v-if="isMyTab('malfunction')" key="malfunction" label="故障单" name="malfunction">
                  <ProcessTable v-if="show === 'malfunction'" work-order-request="todo" work-order-type="malfunction" />
                </el-tab-pane>
                <el-tab-pane v-if="isMyTab('dailyInspection')" key="dailyInspection" label="日巡检" name="dailyInspection">
                  <DailyInspectionTable v-if="show === 'dailyInspection'" />
                </el-tab-pane>
                <el-tab-pane v-if="isMyTab('healthInspection')" key="healthInspection" label="健康巡检" name="healthInspection">
                  <HealthInspectionTable v-if="show === 'healthInspection'" />
                </el-tab-pane>
                <el-tab-pane v-if="isMyTab('heavyInsurance')" key="heavyInsurance" label="重保" name="heavyInsurance">
                  <InsuranceTable v-if="show === 'heavyInsurance'" />
                </el-tab-pane>
                <el-tab-pane v-if="isMyTab('dispatchTask')" key="dispatchTask" label="工作总结" name="dispatchTask">
                  <QuestionnaireTable v-if="show === 'dispatchTask'" />
                </el-tab-pane>
                <el-tab-pane v-if="isMyTab('useGoods')" key="useGoods" label="配件领用" name="useGoods">
                  <ProcessTable v-if="show === 'useGoods'" work-order-request="todo" work-order-type="spareConsume" />
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </div></el-col>
      <el-col :span="4">
        <el-card shadow="never" class="oneCard card-h-100">
          <!-- 时间 -->
          <div class="never_rigth">
            <div />
            <div class="never_time never_text">
              {{ currentTime.time }}
            </div>
            <div style="" class="never_text">
              {{ currentTime.date }}
            </div>
            <div class="never_text">
              {{ currentTime.week }}
            </div>
          </div>

          <!-- 快捷入口 -->
          <div class="never_main  margin-top-10">
            <div />
            <div style="width:100%;" class="padding-bottom-10 font-size-20 font-weight border-bottom-solid never_text">
              快捷入口
            </div>
            <div v-for="(quick,index) in quickEntrys" :key="index" style="width:100%;" class="padding-bottom-10 font-size-15 border-bottom-dashed margin-top-10 never_text">
              <router-link class="icon_div" :to="{name:quick.rootName}"><svg-icon class="icon_svg" :icon-class="quick.icon" />{{ quick.name }}</router-link>
              <!-- <div class="icon_div" @click="addDailyReportDialogFormVisible=true"><svg-icon class="icon_svg" :icon-class="quick.icon" />{{ quick.name }}</div> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import ProcessTable from './components/tables/processTable'
import DailyInspectionTable from './components/tables/dailyInspectionTable'
import HealthInspectionTable from './components/tables/healthInspectionTable'
import QuestionnaireTable from './components/tables/questionnaireTable'
import InsuranceTable from './components/tables/insuranceTable'
// TODO 页面开发完换掉路由
// import HeavyInsuranceTable from './components/tables/processTable'
// import DispatchTaskTable from './components/tables/processTable'
// import UseGoodsTable from './components/tables/processTable'

import TransferAsset from './components/cards/transferAsset'
import ServiceTime from './components/cards/serviceTime'
import DailyInspection from './components/cards/dailyInspection'
import HealthInspection from './components/cards/healthInspection'
import Troubleshooting from './components/cards/troubleshooting'
import Sponsortrouble from './components/cards/sponsortrouble'
import UseGoods from './components/cards/useGoods'
import TaskTransfer from './components/cards/taskTransfer'
import OperationAsset from './components/cards/operationAsset'
import ServiceBureau from './components/cards/serviceBureau'

const cardAuthority = {
  // 超级管理员
  admin: {
    card: ['transferAsset', 'serviceTime', 'dailyInspection', 'healthInspection', 'troubleshooting'],
    quickEntry: [
      // { name: '填日报', rootName: 'hn_workDaily', icon: 'daily' },
      // { name: '填周报', rootName: 'hn_operationSupportWeekly', icon: 'week1' },
      // { name: '填月报', rootName: 'hn_monthWeekly', icon: 'month1' },
      // { name: '导资产', rootName: '', icon: 'export1' },
      // { name: '领配件', rootName: '', icon: 'export' },
      // { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '日巡检', code: 'dailyInspection' },
      { name: '健康巡检', code: 'healthInspection' },
      { name: '重保', code: 'heavyInsurance' },
      { name: '工作总结', code: 'dispatchTask' }
    ]
  },
  // 一线工程师
  worker: {
    card: ['transferAsset', 'serviceTime', 'dailyInspection', 'healthInspection', 'troubleshooting'],
    quickEntry: [
      { name: '填日报', rootName: 'hn_workDaily', icon: 'daily' },
      { name: '填周报', rootName: 'hn_operationSupportWeekly', icon: 'week1' },
      { name: '填月报', rootName: 'hn_monthWeekly', icon: 'month1' },
      { name: '导资产', rootName: 'hn_fixedAsset', icon: 'export1' },
      { name: '领配件', rootName: 'hn_usespare', icon: 'export' },
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '配件领用', code: 'useGoods' },
      { name: '日巡检', code: 'dailyInspection' },
      { name: '健康巡检', code: 'healthInspection' },
      { name: '重保', code: 'heavyInsurance' },
      { name: '工作总结', code: 'dispatchTask' }
    ]
  },
  // 一线运维组长
  workerGroupLeader: {
    card: ['transferAsset', 'serviceTime', 'dailyInspection', 'healthInspection', 'troubleshooting'],
    quickEntry: [
      { name: '导资产', rootName: 'hn_fixedAsset', icon: 'export1' },
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '配件领用', code: 'useGoods' },
      { name: '工作总结', code: 'dispatchTask' }
    ]
  },
  // 二线工程师
  expert: {
    card: ['troubleshooting', 'sponsortrouble', 'useGoods', 'taskTransfer', 'operationAsset'],
    quickEntry: [
      { name: '领配件', rootName: 'hn_usespare', icon: 'export' },
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '配件领用', code: 'useGoods' }
    ]
  },
  // 二线工程师组长
  expertGroupLeader: {
    card: ['troubleshooting', 'operationAsset', 'serviceTime', 'dailyInspection', 'serviceBureau'],
    quickEntry: [
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '配件领用', code: 'useGoods' }
    ]
  },
  // 项目总监
  zongjian: {
    card: ['transferAsset', 'serviceTime', 'dailyInspection', 'healthInspection', 'troubleshooting'],
    quickEntry: [
      { name: '建重保', rootName: 'hn_insuranceRegister', icon: 'document' },
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '故障单', code: 'malfunction' },
      { name: '配件领用', code: 'useGoods' },
      { name: '工作总结', code: 'dispatchTask' }
    ]
  },
  // 呼叫中心
  backup: {
    card: ['transferAsset', 'serviceTime', 'dailyInspection', 'healthInspection', 'troubleshooting'],
    quickEntry: [
      { name: '导日志', rootName: 'hn_workDaily', icon: 'daily' },
      { name: '导周报', rootName: 'hn_operationSupportWeekly', icon: 'week1' },
      { name: '导月报', rootName: 'hn_monthWeekly', icon: 'month1' },
      { name: '导资产', rootName: 'hn_fixedAsset', icon: 'export1' },
      { name: '管配件', rootName: 'hn_stock', icon: 'export' },
      { name: '建工单', rootName: 'hn_malfunction', icon: 'malfunction' }
    ],
    task: [
      { name: '配件领用', code: 'useGoods' }
    ]
  }
}

export default {
  name: 'Personalworkbench',
  components: {
    ProcessTable,
    DailyInspectionTable,
    HealthInspectionTable,
    QuestionnaireTable,
    InsuranceTable,
    // HeavyInsuranceTable,
    // DispatchTaskTable,
    // UseGoodsTable,
    TransferAsset,
    ServiceTime,
    DailyInspection,
    HealthInspection,
    Troubleshooting,
    Sponsortrouble,
    UseGoods,
    TaskTransfer,
    OperationAsset,
    ServiceBureau
  },
  data() {
    return {
      // 当前时间
      currentTime: {
        time: '',
        date: '',
        week: ''
      },
      // 定时器
      timer: null,
      // 当前登录的角色
      myRoles: this.$store.getters.roles || [],
      active: ''
    }
  },
  computed: {
    // 卡片
    cards: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      let shows = []
      roles.forEach(element => {
        shows = cardAuthority[element] ? cardAuthority[element].card : []
      })
      return shows
    },
    // 快捷入口
    quickEntrys: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      let shows = []
      roles.forEach(element => {
        shows = cardAuthority[element] ? cardAuthority[element].quickEntry : []
      })
      return shows
    },
    // 待办任务
    todoTasks: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      let shows = []
      roles.forEach(element => {
        shows = cardAuthority[element] ? cardAuthority[element].task : []
      })
      return shows
    },
    // 默认打开
    show: {
      get: function() {
        if (this.active) {
          return this.active
        }
        const roles = this.myRoles
        let shows = []
        roles.forEach(element => {
          shows = cardAuthority[element] ? cardAuthority[element].task : []
        })
        return shows[0] ? shows[0].code : ''
      },
      set: function(newVal) {
        this.active = newVal
      }
    }
  },
  mounted() {
    const that = this
    that.getCurrentTime()
    that.timer = setInterval(function() {
      that.getCurrentTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取当前时间
    getCurrentTime() {
      const that = this
      that.currentTime.time = moment().format('HH:mm:ss')
      that.currentTime.date = moment().format('YYYY年MM月DD日')
      const week = moment().day()
      switch (week) {
        case 1:
          that.currentTime.week = '星期一'
          break
        case 2:
          that.currentTime.week = '星期二'
          break
        case 3:
          that.currentTime.week = '星期三'
          break
        case 4:
          that.currentTime.week = '星期四'
          break
        case 5:
          that.currentTime.week = '星期五'
          break
        case 6:
          that.currentTime.week = '星期六'
          break
        case 0:
          that.currentTime.week = '星期日'
          break
      }
    },
    defaultTab() {
      const roles = this.myRoles
      let shows = []
      roles.forEach(element => {
        shows = cardAuthority[element] ? cardAuthority[element].task : []
      })
      return shows[0] ? shows[0].code : ''
    },
    isMyTab(taskCode) {
      return this.todoTasks.some(it => it.code === taskCode)
    }
  }
}
</script>

<style lang="scss" scoped>
.justify-content{
  justify-content: center;
}
.card-h-100 {
    height: calc(100vh - 75px);
    overflow: auto;
}
.card-h-80 {
    height: calc(100vh - 174px);
    overflow: auto;
}
.never_rigth{
    padding: 18px 0;
    box-sizing: border-box;
    margin:0 -20px;
    border-bottom:1px solid #e6ebf5;
    height: 127px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;;
}
.never_main{
    padding: 16px 33px;
    box-sizing: border-box;
    margin:0 -10px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;;
}
.border-bottom-solid{
  border-bottom: 2px solid #e6ebf5
}
.border-bottom-dashed{
  border-bottom: 2px dashed #e6ebf5
}
.never_time{
  font-size: 33px;
  font-weight: bold;
  padding-bottom:10px;
}
.padding-bottom-10{
  padding-bottom:10px;
}
.font-size-20{
  font-size: 20px;
}
.font-size-15{
  font-size: 15px;
}
.font-weight{
  font-weight: bold;
}
.never_text{
    width: 100%;
    text-align: center;
}
.padding-0-4{
  padding: 0px 4px
}
.margin-top-10{
  margin-top: 10px
}
.icon_div{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0;
  justify-content: center;
}
.icon_svg{
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  font-size: 24px !important;
  color: #303133  !important;
}
</style>
